<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>与运算符&&</title>
	</head>
	<body>
		<div id="root"></div>

		<script
			type="text/javascript"
			src="./components/react.development.js"
		></script>
		<script
			type="text/javascript"
			src="./components/react-dom.development.js"
		></script>
		<script type="text/javascript" src="./components/babel.min.js"></script>

		<script type="text/babel">
      //	通过花括号包裹代码，你可以在jsx中嵌入任何表达式，逻辑与（&&）运算符
			function Mailbox (props) {
				const unreadMessages = props.unreadMessages;
				return (
					<div>
						<h1>Hello!</h1>
						{unreadMessages.length > 0 &&
							<h2>
								You have {unreadMessages.length} unread messages.
							</h2>
						}
					</div>
				);
			}

			const messages = ['React', 'Re：React', 'Re:Re：React'];
			ReactDOM.render(
				<Mailbox unreadMessages={messages}/>,
				document.getElementById('root')
			);
      
		</script>
	</body>
</html>
